(function (global) {
    // 返回首页按钮
    let content = document.querySelector('.content');
    content.addEventListener('click', function (e) {
        if (e.target.className === 'show_main') {
            col_artical_list.style.display = 'none';
            articleContent.style.display = 'none';
            artical_list.style.display = 'block';
        }
    });

    // 渲染分类专栏
    let col_list = document.querySelector('.col_list');
    let columnTemplate = (class_id,class_name) => `
        <li data-id="${class_id}">
            ${class_name}
        </li>
    `;
    let renderColumn = () => {
        ajax({
            method: 'GET',
            url: urlRoot + 'article/class',
        }).then((json) => {
            col_list.innerHTML = '';
            json.data.forEach(col => {
                let li = str2Html(columnTemplate(col.id, col.class_name));
                col_list.appendChild(li);
            });
        }, (error) => {
            alert(error);
        });
    }
    renderColumn();

    // 渲染文章专栏
    let artical_list = document.querySelector('.artical_list');
    let artical_ul = artical_list.querySelector('ul');
    let articleContent = document.querySelector('article');
    let num_every_page = document.querySelector('.num_every_page');
    let page_input = document.querySelector('.page_input');
    let page_confirm_btn = document.querySelector('.page_confirm_btn');
    let currentPage = 1;
    let currentArtiNum = 0;
    let articleId;
    let articleLiTemplate = (id,title, createtime, col_name, content = "") => `
    <li data-id="${id}">
        <h3 class="class_title">${title}</h3>
        <p class="article_content">
            ${content}
        </p>
        <div class="author_info">
            <img src="./img/userface.png" alt="作者" class="author_face">
            <span class="author_name">折本咲焰</span>
            <span class="create_time">${formatDate(createtime)}</span>
            <span class="article_class">${col_name}</span>
        </div>
    </li>`
    let renderArticleList = () => {
        ajax({
            method: 'GET',
            url: urlRoot + 'article/getArticle',
            data: {
                page_num: currentPage,//页数应该制定一个变量获取
                page_size: num_every_page.value,
            }
        }).then((json) => {
            artical_ul.innerHTML = '';
            currentArtiNum = json.data.length;
            json.data.forEach(arti => {
                let li = str2Html(articleLiTemplate(arti.id, arti.title, arti.create_time, arti.class_name, arti.content));
                artical_ul.appendChild(li);
            });
            page_input.querySelector('input').value = currentPage;
        }, (error) => {
            alert(error);
        });  
    };
    renderArticleList();

    // 文章详情展示
    artical_list.addEventListener('click', function (e) {
        if (e.target.className === 'class_title') {
            articleId = e.target.parentNode.dataset.id;
            renderArticle();
            showArtiContent();
        }
    });
    // 展示文章详情页面
    let showArtiContent = () => {
        artical_list.style.display = 'none';
        col_artical_list.style.display = 'none';
        articleContent.style.display = 'block';
    };
    let articleTemplate = (title, create_time, class_name, content) => `
    <div>
        <h1 class="title">${title}</h1>
        <a href="javascript:;" class="show_main">返回首页</a>
        <section>
            <span class="author">折本咲焰</span>
            <span class="create_time">${formatDate(create_time)}</span>
            <span class="arti_class">${class_name}</span>
        </section>
        <p>
            ${content}
        </p>
    </div>
    `
    // 渲染文章详情页面
    let renderArticle = () => {
        ajax({
            method: 'GET',
            url: urlRoot + 'article/getArticle',
            data: {
                id: articleId,
            },
        }).then((json) => {
            articleContent.innerHTML = '';
            let arti = json.data[0];
            let article = str2Html(articleTemplate( arti.title, arti.create_time, arti.class_name, arti.content));
            articleContent.appendChild(article);
        }, (error) => {
            alert(error);
        });
    };
    // 设定每页数量
    num_every_page.addEventListener('change', function () {
        currentPage = 1;
        renderArticleList();
    });
    // 翻页机制
    let previous_page_btn = document.querySelector('.previous_page_btn');
    let next_page_btn = document.querySelector('.next_page_btn');
    previous_page_btn.addEventListener('click', function () {
       if (currentPage > 1) {
           currentPage--;
           renderArticleList();
       }
    });
    next_page_btn.addEventListener('click', function () {
        console.log(currentArtiNum);
        console.log(num_every_page.value);
        if (currentArtiNum === Number(num_every_page.value)) {
            currentPage++;
            renderArticleList();
        }
    });
    // 指定页数
    page_confirm_btn.addEventListener('click', function () {
        currentPage = page_input.querySelector('input').value;
        renderArticleList();
    });

    
    // 分类文章
    let col_artical_list = document.querySelector('.col_artical_list');
    let col_artical_ul = document.querySelector('.col_artical_ul');
    let arti_count = document.querySelector('.arti_count');
    // 展示分类文章页面
    let showColArtiList = function () {
        artical_list.style.display = 'none';
        articleContent.style.display = 'none';
        col_artical_list.style.display = 'block';
    }
    // 分类名h3获取修改
    let col_titleH3 = col_artical_list.querySelector('nav>h3');
    let col_id;//分类id
    let col_name;
    // 分类加点击监听
    col_list.addEventListener('click', function (e) {
        col_id = e.target.dataset.id;//点击的分类id
        renderArticleByClassid();
        col_name = e.target.innerText;
        showColArtiList();
    });
    // 分类文章模板 articleTemplate
    // 渲染分类文章
    let renderArticleByClassid = function () {
        ajax({
            method: 'GET',
            url: urlRoot + 'article/getArticle',
            data: {
                class_id: col_id,
            }
        }).then((json) => {
            arti_count.innerText = json.data.length + ' 篇文章';
            col_titleH3.innerText = col_name;
            col_artical_ul.innerHTML = '';
            json.data.forEach(arti => {
                let li = str2Html(articleLiTemplate(arti.id, arti.title, arti.create_time, col_name, arti.content));
                col_artical_ul.appendChild(li);
            });
        }, (error) => {
            alert(error);
        });
    };
    // 分类文章添加监听事件请求文章
    col_artical_ul.addEventListener('click', function (e) {
        let li = e.target.parentNode;
        articleId = li.dataset.id;
        if (e.target.className === 'class_title') {
            showArtiContent();
            renderArticle();
        }
    });
})(window);